<template>
  <basic-container>
    <el-form ref="form" searchform :model="form" :rules="rules" label-width="80px" @submit.native.prevent>
      <el-row>
        <el-col span="5" style="min-width:150px">
          <div class="text" style="width: 30%">租户:</div>
          <el-select v-model="form.tenantId" clearable filterable placeholder="请选择租户" size="mini" style="width: 60%"
                     @change="searchForm">
            <el-option
              v-for="item in tenantList"
              :key="item.tenantId"
              :label="item.tenantName"
              :value="item.tenantId">
            </el-option>
          </el-select>
        </el-col>
        <el-col span="5" style="min-width:150px">
          <div class="text" style="width: 30%">订单ID:</div>
          <el-select v-model="form.offerIdList" clearable multiple filterable placeholder="请选择订单" size="mini" style="width: 60%"
                     @change="searchForm">
            <el-option
              v-for="item in tenant.offerIdList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-col>
        <el-col span="5" style="min-width:150px">
          <div class="text" style="width: 30%">账户ID:</div>
          <el-select v-model="form.platformIdList" clearable multiple filterable placeholder="请选择账户" size="mini" style="width: 60%"
                     @change="searchForm">
            <el-option
              v-for="item in tenant.platformIdList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-col>
        <el-col span="5" style="min-width:150px">
          <div class="text" style="width: 30%">操作:</div>
          <el-select v-model="form.operType" clearable placeholder="请选择操作" size="mini" style="width: 60%"
                     @change="searchForm">
            <el-option
              v-for="item in operTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col span="4" style="min-width: 160px;display:flex;justify-content:flex-end">
          <el-tooltip class="item" effect="dark" content="展开全部" placement="top">
            <el-button :class="upIcon" class="search-circle" @click="unfoldIcon" style="margin-right: 10px"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="清空" placement="top">
            <el-button :class="emptyIcon" class="search-circle" @click="emptyForm"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="搜索" placement="top">
            <el-button type="primary" icon="el-icon-search" size="small" @click="searchForm" style="margin-right: 0">搜索</el-button>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row v-show="searchConceal">
        <el-col span="10" style="min-width:150px">
          <div class="text" style="width: 15%;">更新日期:</div>
          <el-date-picker
            style="width: 60%;"
            v-model="form.updateDate"
            size="mini"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="searchForm">
          </el-date-picker>
        </el-col>
        <el-col span="5" style="min-width:150px">
          <div class="text" style="width: 30%">异常原因:</div>
          <el-select v-model="form.exceptionCodesList" clearable multiple placeholder="请选择异常原因" size="mini" style="width: 60%"
                     @change="searchForm">
            <el-option
              v-for="item in exceptionCodesList"
              :key="item.code"
              :label="item.code + '-' + item.description"
              :value="item.code">
            </el-option>
          </el-select>
        </el-col>
        <el-col span="5" style="min-width:150px">
          <div class="text" style="width: 30%">状态:</div>
          <el-select v-model="form.statusList" clearable multiple placeholder="请选择状态" size="mini" style="width: 60%"
                     @change="searchForm">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col span="5" style="min-width:150px">
          <div class="text" style="width: 30%">操作人:</div>
          <el-select v-model="form.operator" clearable filterable placeholder="请选择操作人" size="mini" style="width: 60%"
                     @change="searchForm">
            <el-option
              v-for="item in tenant.operatorList"
              :key="item.id"
              :label="item.real_name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col span="5" style="min-width:150px">
          <div class="text" style="width: 30%">数据来源:</div>
          <el-select v-model="form.fromType" clearable placeholder="请选择数据来源" size="mini" style="width: 60%"
                     @change="searchForm">
            <el-option
              v-for="item in fromTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row >
    </el-form>
    <avue-crud
      :table-loading="loading"
      :data="data"
      :option="option"
      :page.sync="page"
      ref="crud"
      @on-load="onLoad"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
    >
      <template slot-scope="scope" slot="exceptionCodes">
        <el-tooltip effect="dark" v-if="scope.row.exceptionCodes != '' && scope.row.exceptionCodes != null" :content="getExceptionCodeDescription(scope.row.exceptionCodes)" placement="top-end">
          <div style="border-bottom: 1px solid blue;color: red;cursor: pointer;text-align:center;">
            {{scope.row.exceptionCodes}}
          </div>
        </el-tooltip>
      </template>
    </avue-crud>
  </basic-container>
</template>
<script>

  import {getExceptionCodeList} from "@/api/verification/beetlesaccountexception";
  import {getList, getTenantParamsList} from "@/api/verification/OperationRecord";
  import {getActiveTenantList} from "@/api/system/tenant";
  import {findByProp, refineObject} from "@/util/util";

  import Moment from 'moment';

/**
 * 操作记录
 */
export default {
  name: "OperationRecord",
  data() {
    return{
      option: {
        addBtn: false,
        menu: false,
        border: true,
        selection: true,
        align: 'center',
        menuAlign: 'center',
        excelBtn: true,
        excelBtnText: "导出数据",
        column: [
          {
            label: '记录ID',
            prop: 'id',

          },
          {
            label: '账户ID',
            prop: 'accountId',
            width: 150,
          },

          {
            label: '订单ID',
            prop: 'offerId',
          },
          {
            label:'状态',
            prop:'status',
            type: "select",
            dicData:  [
              {label: '异常',       value: 0},
              {label: '正常',       value: 1},
              {label: '归档',       value: 2},
            ],
          },
          {
            label: '异常原因',
            prop: "exceptionCodes",
          },
          {
            label: '发现时间',
            prop: 'beginTime',
            type: "select",
          },
          {
            label: '解决时间',
            prop: 'solvedTime',
            type: "select",
          },
          {
            label: '操作',
            prop: 'operType',
            width: 150,
            type: "select",
            dicData: [
              {label: '系统校验',       value: 0},
              {label: '手动拉取校验',   value: 1},
              {label: 'excel导入校验',  value: 2},
              {label: '问题归档',       value: 3},
            ]
          },
          {
            label: '操作人',
            prop: 'operatorName',
            width: 150,
          },
          {
            label: '操作',
            prop: 'fromType',
            width: 150,
            type: "select",
            dicData: [
              {label: '账户花费校验',       value: 0},
              {label: '广告花费校验',       value: 1},
              {label: '在线广告校验',       value: 2},
              {label: '素材花费校验',       value: 3},
              {label: '三方花费校验',       value: 4},
            ]
          },
        ]
      },
      data:[],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [10,15,20,30,40,50,100],
      },
      selectionList: [],

      tenantList: [],
      operTypeList: [
        {label: '系统校验',       value: 0},
        {label: '手动拉取校验',   value: 1},
        {label: 'excel导入校验',  value: 2},
        {label: '问题归档',       value: 3},
      ],
      exceptionCodesList: [],
      statusList: [
        {label: '异常',       value: 0},
        {label: '正常',       value: 1},
        {label: '归档',       value: 2},
      ],
      fromTypeList: [
        {label: '账户花费校验',       value: 0},
        {label: '广告花费校验',       value: 1},
        {label: '在线广告校验',       value: 2},
        {label: '素材花费校验',       value: 3},
        {label: '三方花费校验',       value: 4},
      ],
      operator: [],
      query: {},
      form: {
        tenantId: '',
        offerIdList: [],
        platformIdList: [],
        operType: '',
        updateDate: null,
        exceptionCodesList: [],
        statusList: [],
        operator: '',
        fromType: '',
      },
      rules: {
        tenantId: [{required: true, message: '请选择租户',trigger: 'change'}]
      },
      upIcon: 'el-icon-arrow-down',
      searchIcon: 'el-icon-search',
      emptyIcon: 'el-icon-delete',
      searchConceal: false,

      tenant: {
        offerIdList: [],
        platformIdList: [],
        operatorList: [],
      },

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '过去三十天',
          onClick(picker) {
            let start = Moment(new Date()).subtract(1, "months").toDate();
            let end = Moment(new Date()).subtract(1, "days").toDate();
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '过去十四天',
          onClick(picker) {
            let start = Moment(new Date()).subtract(14, "days").toDate();
            let end = Moment(new Date()).subtract(1, "days").toDate();
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '过去七天',
          onClick(picker) {
            let start = Moment(new Date()).subtract(7, "days").toDate();
            let end = Moment(new Date()).subtract(1, "days").toDate();
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '昨天',
          onClick(picker) {
            let start = Moment(new Date()).subtract(1, "days").toDate();
            picker.$emit('pick', [start, start]);
          }
        },{
          text: '今天',
          onClick(picker) {
            let start = new Date();
            picker.$emit('pick', [start, start]);
          }
        }]
      },
    }
  },
  watch: {
    'form.tenantId': {
      deep: true,
      handler(val,old) {
        if (val === old) {
          return
        }
        this.form.platformIdList = [];
        this.form.offerIdList = [];
        this.form.operator = '';

        this.tenant.offerIdList = [];
        this.tenant.platformIdList = [];
        this.tenant.operatorList = [];
        if(val != null && val != '') {
          this.loadTenantParams(val);
        }
      }
    },
  },
  created() {
    this.form.tenantId = this.$route.params.tenantId;
    getActiveTenantList().then((res)=>{
      this.tenantList=res.data.data;
    });
    getExceptionCodeList().then((res)=>{
      this.exceptionCodesList=res.data;
    });
    if(this.form.tenantId != null && this.form.tenantId != '') {
      this.searchForm();
    }
  },

  methods:{
    unfoldIcon(){
      if (this.upIcon === 'el-icon-arrow-down'){
        this.upIcon = 'el-icon-arrow-up'
        this.searchConceal = true
      }else {
        this.upIcon = 'el-icon-arrow-down'
        this.searchConceal = false
      }
    },
    loadTenantParams(tenantId) {
      getTenantParamsList(tenantId).then(res=>{
        if(res.data.success) {
          this.tenant.offerIdList = res.data.data.offerIdList;
          this.tenant.platformIdList = res.data.data.accountIdList;
          this.tenant.operatorList = res.data.data.operatorList;
        }
      });
    },
    getExceptionCodeDescription(codes) {
      if(codes == '') {
        return '';
      } else {
        let codeList = codes.split(',');
        let descriptionList = [];
        codeList.forEach((code)=>{
          descriptionList.push(findByProp(this.exceptionCodesList,code,'code','description'));
        });
        return descriptionList.join(',')
      }
    },
    searchForm(){
      if(this.form.tenantId == null || this.form.tenantId == '') {
        this.$message.warning('请选择租户');
        return;
      }
      this.query = {
        tenantId: this.form.tenantId,
        offerIdList: this.form.offerIdList.join(","),
        platformIdList: this.form.platformIdList.join(","),
        operType: this.form.operType,
        exceptionCodesList: this.form.exceptionCodesList.join(','),
        statusList: this.form.statusList.join(','),
        operator: this.form.operator,
        fromType: this.form.fromType,
      };
      if(this.form.updateDate == null || this.form.updateDate.length == 0) {
        this.query.updateTimeList = '';
      } else {
        this.query.updateTimeList = Moment(this.form.updateDate[0]).format('YYYY-MM-DD') + ',' + Moment(this.form.updateDate[1]).format('YYYY-MM-DD')
      }
      this.page.currentPage = 1;
      this.onLoad(this.page)
    },
    //清空按钮函数
    emptyForm(){
      Object.assign(this.form, {
          offerIdList: [],
          platformIdList: [],
          operType: '',
          updateDate: null,
          exceptionCodesList: [],
          statusList: [],
          operator: '',
          fromType: '',
      });
      this.searchForm();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
      this.selectionClear();
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page);
      this.selectionClear();
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page);
      this.selectionClear();
    },

    onLoad(page) {
      if(this.form.tenantId == null || this.form.tenantId == '') {
        return;
      }

      getList(page.currentPage,page.pageSize, this.query).then((res)=>{
        const data = res.data.data;
        this.page.total = data.total;
        this.data = refineObject(data.records,[{from: '-1',to: ''}]);
      })
    },
  },
}
</script>
<style scoped>
  .text{
    width: 45px;
    height:30px;
    float: left;
    font-size: 13px;
    margin-top: 3px;
    color: #72767b
  }


  /deep/[searchform].el-form .el-form-item__error {
    top: -20px;
    left: 45px;
  }
  .search-circle{
    border-radius: 50%;
    border: 1px solid #dcdfe6;
    width: 30px;
    height: 30px;
    padding: 0;
    margin-right: 0;
  }
</style>
